<!DOCTYPE html>
<html>
<head>
  <title>Cool AI Animation</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #222;
      font-family: Arial, sans-serif;
      overflow: hidden;
    }

    .container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600px;
    }

    .ai-logo {
      width: 200px;
      height: auto;
      animation: spin 4s linear infinite;
      cursor: pointer;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    .glow {
      position: relative;
      display: inline-block;
    }

    .glow:before,
    .glow:after {
      content: "";
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, #00c7ff, #ff00ff, #00c7ff, #ff00ff);
      opacity: 0.6;
      border-radius: 50%;
      animation: glow 8s linear infinite;
    }

    .glow:after {
      animation-delay: 4s;
    }

    @keyframes glow {
      0% {
        transform: scale(1);
        opacity: 0.6;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.3;
      }
      100% {
        transform: scale(1);
        opacity: 0.6;
      }
    }

    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32px;
      color: #fff;
      text-shadow: 0 0 4px #00c7ff, 0 0 8px #00c7ff, 0 0 16px #00c7ff, 0 0 32px #00c7ff, 0 0 64px #00c7ff, 0 0 128px #00c7ff;
      animation: flicker 6s linear infinite;
    }

    @keyframes flicker {
      0% {
        opacity: 0.2;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0.2;
      }
    }

    .ai-knowledge {
      position: absolute;
      top: 60%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      font-size: 24px;
      color: #fff;
      text-align: center;
      animation: slide-up 10s ease-in-out infinite;
    }

    @keyframes slide-up {
      0% {
        transform: translate(-50%, -50%);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translate(-50%, -130%);
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="glow">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="ai-logo">
        <path d="M223.52 272c0-19.84 16.16-32 32.48-32h16c16.32 0 32.48 12.16 32.48 32v32.64C304.16 320 291.68 336 271.04 336h-30.88C220.16 336 208 320 208 304.64V272zm80 0c0-19.84 16.16-32 32.48-32h16c16.32 0 32.48 12.16 32.48 32v32.64C384.16 320 371.68 336 351.04 336h-30.88C300.16 336 288 320 288 304.64V272z"/>
        <path d="M464 448H48c-8.8 0-16-7.2-16-16V80c0-8.8 7.2-16 16-16h416c8.8 0 16 7.2 16 16v352c0 8.8-7.2 16-16 16zM48 64c-8.8 0-16 7.2-16 16v352c0 8.8 7.2 16 16 16h416c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16H48z"/>
      </svg>
    </div>
    <div class="text">Welcome to the AI World</div>
    <div class="ai-knowledge">
      <p>AI, or Artificial Intelligence, is a field of computer science that focuses on creating intelligent machines capable of performing tasks that typically require human intelligence.</p>
      <p>AI technologies include machine learning, natural language processing, computer vision, and robotics.</p>
    </div>
  </div>

  <script>
    const aiLogo = document.querySelector('.ai-logo');
    const text = document.querySelector('.text');
    const aiKnowledge = document.querySelector('.ai-knowledge');

    aiLogo.addEventListener('click', () => {
      text.style.animationPlayState = 'running';
      aiKnowledge.style.animationPlayState = 'running';
    });
  </script>
</body>
</html>
